<!--
 * @Author: 一路向阳 tt_sunzhenfeng@163.com
 * @Date: 2024-05-22 16:31:44
 * @LastEditors: 一路向阳 tt_sunzhenfeng@163.com
 * @LastEditTime: 2024-05-27 17:39:27
 * @FilePath: \vue3_nuxt_demo\pages\login.vue
 * @Description: 登陆页面
-->
<template>
  <div class="register-page-container">

    <!-- logo部分 -->
    <a-row class="logo-part-container">
      <div class="logo">
        <NuxtLink href="#" style="display: inline-block;width: 100%;">
          <a-image style="width: 100px;margin-left: 15px;" :preview="false" :src="logo" alt="logo"
            :fallback="viewUrl" />
        </NuxtLink>
      </div>
    </a-row>

    <!-- 表单部分 -->
    <a-row class="register-main-container" type="flex" justify="center">
      <a-col :span="12" class="register-left">

        <a-row type="flex" justify="center" align="center">
          <a-image width="50%" class="sign_bg" :preview="false" :src="sign_bg" alt="sign_bg" :fallback="viewUrl" />
        </a-row>

        <a-row type="flex" justify="center" style="display: flex;align-items: center;margin: 25px 0;">
          <a-button style="width: 250px;height: 45px" shape="round" size="large" type="primary">下载简书APP</a-button>
          <a-popover placement="topRight">
            <template #content>
              <div class="page_download">
                <a-image :preview="false" width="60px" :src="login_page_download" alt="download" :fallback="viewUrl" />
              </div>
            </template>
            <div class="page_download">
              <a-image :preview="false" width="60px" :src="login_page_download" alt="download" :fallback="viewUrl" />
            </div>
          </a-popover>
        </a-row>

      </a-col>

      <a-col :span="12" class="register-right">
        <div class="register-form-container">

          <a-row class="tag-title" type="flex" justify="center" align="center">
            <NuxtLink to="/login" class="sign_in">登录</NuxtLink>
            <b>·</b>
            <NuxtLink to="/register" class="active">注册</NuxtLink>
          </a-row>

          <a-row>
            <a-form :model="formData">
              <!-- 昵称 -->
              <a-form-item>
                <a-input placeholder="你的昵称" v-model:value="formData.nickname">
                  <template #prefix>
                    <i-ep-user-filled />
                  </template>
                </a-input>
              </a-form-item>

              <!-- 手机号 -->
              <a-form-item style="border-top: 1px solid #C8C8C8;">
                <a-input placeholder="手机号或邮箱" v-model:value="formData.phone">
                  <template #prefix>
                    <i-mdi-cellphone-iphone />
                  </template>
                </a-input>
              </a-form-item>
              <!-- 密码 -->
              <a-form-item style="border-top: 1px solid #C8C8C8;">
                <a-input placeholder="密码" type="password" v-model:value="formData.password">
                  <template #prefix>
                    <i-ant-design-lock-filled />
                  </template>
                </a-input>
              </a-form-item>

            </a-form>
          </a-row>

          <a-row type="flex" justify="center" class="sign_in_btn">
            <a-button @click="handleUserRegister" type="success" shape="round">
              注册
            </a-button>
          </a-row>

          <a-row type="flex" justify="center">
            <p style="width: 80%;color: #b5b5b5; font-size: 13px;text-align: center;margin-top: 10px">
              点击"注册"即表示您同意并愿意遵守简书的
              <a>用户协议</a>和<a>隐私政策</a>
            </p>
          </a-row>

          <div class="more-sign">
            <h6>社交帐号注册</h6>
            <a-row type="flex" justify="center" style="margin-top: 30px">
              <div style="margin-right: 30px">
                <i-ant-design-wechat-outlined style="color:#00BB29;font-size: 30px" />
              </div>
              <div><i-ant-design-qq-outlined style="color:#498AD5;font-size: 30px" /></div>
            </a-row>
          </div>

        </div>
      </a-col>
    </a-row>

  </div>
</template>

<script setup>
import logo from '@/assets/logo.png';
import sign_bg from '@/assets/sign_bg.png';
import login_page_download from '@/assets/login_page_download.png';

import { userRegister } from '@/apis/auth';
import { useErrorImage } from '@/composables/state';

const { $message } = useNuxtApp();

// 预加载错误图片
const viewUrl = useErrorImage();

const formData = reactive({
  nickname: '',
  phone: '',
  password: ''
});

const handleUserRegister = async () => {
  if (formData.nickname === '') {
    $message.error('请输入昵称');
    return false;
  }
  if (formData.phone === '') {
    $message.error('请输入手机号或邮箱');
    return false;
  }

  if (formData.password === '') {
    $message.error('请输入密码');
    return false;
  }

  const { data } = await userRegister({
    body: { ...formData }
  });

  if (data?.success) {
    $message.success(data?.msg);
    navigateTo('/login');
  }
  else {
    $message.error(data?.msg);
  }
}
</script>

<style lang="less" scoped>
.register-page-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #F1F1F1;

  .logo-part-container {

    .logo {
      width: 100%;
      height: 100px;
      display: flex;
      align-items: center;
    }
  }

  .register-main-container {
    flex: 1;
    align-items: center;

    .register-left {
      display: flex;
      flex-direction: column;
      align-items: center;

      .sign_bg {
        width: 70%;
      }

      .page_download {
        background: #ffffff;
        margin-left: 20px;
        padding: 5px;

        img {
          width: 46px;
        }
      }
    }

    .register-right {
      display: flex;
      align-items: center;
      justify-content: center;

      .register-form-container {
        width: 400px;
        margin: 0 auto;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 0 8px rgb(0 0 0 / 10%);
        vertical-align: middle;
        display: inline-block;

        .tag-title {
          padding: 15px 0;
          font-size: 18px;
          font-family: Georgia, Times New Roman, Times, Songti SC, serif;

          NuxtLink:hover {
            border-bottom: 2px solid #ea6f5a;
          }

          .active {
            font-weight: 700;
            color: #ea6f5a;
            border-bottom: 2px solid #ea6f5a;
            padding: 5px 10px;
          }

          b {
            padding: 5px 15px;
            color: #969696;
            font-weight: 700;
          }

          .sign_in {
            padding: 5px 10px;
            color: #969696;
          }
        }

        .ant-form {
          width: 100%;
          padding: 0 25px;
        }

        .ant-input {
          background-color: #F7F7F7 !important;
          height: 40px !important;
          border-radius: 6px;
          outline: none !important;
        }

        .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
          border-color: #C8C8C8 !important;
          border-right-width: 1px !important;
          z-index: 1;
        }

        .ant-input-affix-wrapper:focus,
        .ant-input-affix-wrapper-focused {
          border-color: #C8C8C8 !important;
          box-shadow: none !important;
          border-right-width: 1px !important;
        }

        .ant-input-affix-wrapper {
          border-radius: 6px !important;
        }

        .ant-input-prefix {
          margin-right: 8px;
        }

        .sign_in_btn {

          .ant-btn {
            height: 45px !important;
            width: 50% !important;
            background-color: #43BF2F !important;
            color: #ffffff !important;
          }

          .ant-btn:hover,
          .ant-btn:focus {
            color: #43BF2F;
            border-color: #43BF2F;
          }

        }

        .more-sign {
          margin: 50px 0;
          text-align: center;
        }

        .more-sign h6 {
          position: relative;
          margin: 0 0 10px;
          font-size: 12px;
          color: #b5b5b5;
        }

        .more-sign h6:before,
        .more-sign h6:after {
          content: "";
          border-top: 1px solid #b5b5b5;
          display: block;
          position: absolute;
          width: 60px;
          top: 8px;
        }

        .more-sign h6:before {
          left: 30px;
        }

        .more-sign h6:after {
          right: 30px;

        }
      }
    }
  }
}
</style>